<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-pre>{{ this will not be compiled }}</span>

      <!-- 遍历数组 -->
      <ul>
        <li v-for="(item,index) in person" :key="index">
          {{item.id}}***** {{item.name}}***** {{item.age}}----{{index}}
        </li>
      </ul>
      <hr />
      <!-- 遍历对象 -->
      <ul>
        <!-- 遍历对象是调用的是objec.keys(),结果的顺序可能和你书写的顺序不一致 -->
        <li v-for="(value,name,index) in obj" :key="index">
          {{value}}---{{name}}---{{index}}
        </li>
      </ul>
      <hr />
      <!-- 遍历字符串 -->
      <ul>
        <li v-for="item,index in str" :key="index">{{item}}===={{index}}</li>
      </ul>
      <hr />
      <!-- 遍历数字 -->
      <ul>
        <li v-for="count in 6">{{count}}列表项</li>
      </ul>
      <hr />
      99乘法表格
      <p v-for="n in 9">
        <b v-for="m in n"> {{m}}*{{n}}={{m*n}}&nbsp&nbsp&nbsp</b>
      </p>
      <hr />
      <!-- v-for和v-if一起使用的注意事项 -->
      <ul>
        <template v-for="(item,index) in person" :key="index">
          <li v-if="item.register">
            {{item.id}}***** {{item.name}}***** {{item.age}}----{{index}}
          </li>
        </template>
      </ul>
      <hr />
      <!-- 遍历计算过滤后的结果 -->
      <ul>
        <li v-for="item,index in eventNumbers" :key="index">{{item}}</li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            person: [
              { id: "011", name: "张三", age: 18, register: true },
              { id: "012", name: "李四", age: 8, register: false },
              { id: "013", name: "王五", age: 28, register: true },
            ],
            obj: {
              title: "guidian",
              11: "jack",
              time: "2020-5-1",
            },
            str: "guilindianzikejidaxue",
            arr: [1, 2, 3, 4, 5, 6, 7, 8],
          };
        },
        methods: {},
        computed: {
          eventNumbers() {
            return this.arr.filter((number) => number % 2 === 0);
          },
        },
        watch: {},
      }).mount("#app");
    </script>
  </body>
</html>
